<template>
  <div class="table">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-date"></i> 表单</el-breadcrumb-item>
        <el-breadcrumb-item>基本表单</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <el-button @click="addUser">新增</el-button>
      <!-- <div class="form-box"> -->
      <!-- <el-button @click=" editVisible= true; form.userName='';form.id=0,form.roles=[], form.passWord=''">新增</el-button> -->
      <el-table :data="data" border style="width: 100%" ref="multipleTable" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="UserName" label="用户名" sortable width="300">
        </el-table-column>
        <el-table-column prop="EmailAddress" label="邮箱地址" width="300">
        </el-table-column>

        <el-table-column prop="FullName" label="全名">
        </el-table-column>

        <el-table-column label="是否激活" width="100">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.IsActive" disabled></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination @current-change="handleCurrentChange" layout="prev, pager, next" :total='totalNum'>
        </el-pagination>
      </div>
      <el-dialog title="编辑" :visible.sync="editVisible" width="30%">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="用户名">
            <el-input v-model="form.userName">
            </el-input>
          </el-form-item>
          <el-form-item label="名称">
            <el-input v-model="form.name">
            </el-input>
          </el-form-item>
          <el-form-item label="SurnName">
            <el-input v-model="form.surname">
            </el-input>
          </el-form-item>
          <el-form-item label="邮箱地址">
            <el-input v-model="form.emailAddress">
            </el-input>
          </el-form-item>

          <el-form-item label="是否激活">
            <el-checkbox v-model="form.isActive">
            </el-checkbox>
          </el-form-item>

          <el-form-item label="角色">
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
            <div style="margin: 15px 0;"></div>
            <el-checkbox-group v-model="form.roles" @change="handleCheckedCitiesChange">
              <el-checkbox v-for="op in options" :label="op.name" :key="op.id">{{op.name}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>

          <!-- <el-form-item label="角色">
            <el-select v-model="form.roles" multiple placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item> -->

          <el-form-item>
            <el-button type="primary" @click="onEditSubmit">提交</el-button>
            <el-button @click="editVisible=false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

      <el-dialog title="新增" :visible.sync="addVisible" width="30%">
        <el-form ref="form" :rules="rules" :model="form" label-width="80px">
          <el-form-item label="用户名">
            <el-input v-model="form.userName">
            </el-input>
          </el-form-item>
          <el-form-item label="名称" prop="name">
            <el-input v-model="form.name">
            </el-input>
          </el-form-item>
          <el-form-item label="SurnName">
            <el-input v-model="form.surname">
            </el-input>
          </el-form-item>
          <el-form-item label="邮箱地址" prop="emailAddress">
            <el-input v-model="form.emailAddress">
            </el-input>
          </el-form-item>

          <el-form-item label="密码">
            <el-input type="password" placeholder="密码" v-model="form.password"></el-input>
          </el-form-item>

          <el-form-item label="密码确认">
            <el-input type="password" placeholder="确认密码" v-model="form.confirmPassword"></el-input>
          </el-form-item>

          <el-form-item label="是否激活">
            <el-checkbox v-model="form.isActive">
            </el-checkbox>
          </el-form-item>

          <el-form-item label="角色">
            <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
            <div style="margin: 15px 0;"></div>
            <el-checkbox-group v-model="form.roles" @change="handleCheckedCitiesChange">
              <el-checkbox v-for="op in options" :label="op.name" :key="op.id">{{op.name}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="onAddSubmit">提交</el-button>
            <el-button @click="addVisible=false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>

      <!-- 删除提示框 -->
      <el-dialog title="删除" width="300px" :visible.sync="delVisible" left>
        <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="delVisible = false">取 消</el-button>
          <!-- <el-button @click="test">测 试</el-button> -->
          <el-button type="primary" @click="deleteRow">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 删除提示框 -->
      <!-- <el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
            <div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="delVisible = false">取 消</el-button>
                <el-button type="primary" @click="deleteRow">确 定</el-button>
            </span>
        </el-dialog> -->

    </div>

  </div>
</template>

<script>
import {
  GetAllUser,
  GetUser,
  GetRoles,
  UpdateUser,
  CreateUser,
  SaveOrUpdateUser,
  DeleteUser,
  test
} from "../../../service/service.jsx";
export default {
  name: "UsersList",
  data: function() {
    var validateEmail = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请正确填写邮箱"));
      } else {
        if (value !== "") {
          var reg = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
          if (!reg.test(value)) {
            callback(new Error("请输入有效的邮箱"));
          }
        }
        callback();
      }
    };

    return {
      dataList: [],
      checkAll: false,
      isIndeterminate: true,
      options: [],
      value5: [1, 2],
      editVisible: false,
      totalNum: 0,
      cur_page: 1,
      pagesize: 10,
      multipleSelection: [],
      delVisible: false,
      addVisible: false,
      form: {
        id: 0,
        userName: "",
        password: "",
        confirmPassword: "",
        name: "",
        surname: "",
        emailAddress: "",
        isActive: true,
        roles: []
      },
      rules: {
        // 校验手机号码，主要通过validator来指定验证器名称
        emailAddress: [
          { required: true, validator: validateEmail, trigger: "blur" }
        ],
        name: [
          { min: 3, max: 10, message: "长度在 3 到 10 个字符" },
          { required: true, trigger: "blur" }
        ]
      },
      idx: -1
    };
  },
  created() {
    this.getData();
  },
  methods: {
    // 分页导航
    handleCurrentChange(val) {
      this.cur_page = val;
      this.getData();
    },

    getData() {
      GetRoles(this.$axios, {}, {}).then(res => {
        console.log("角色", res);
        let list = [];
        res.data.result.items.map((x, i) => {
          let item = {
            id: x.id,
            name: x.name
          };

          list.push(item);
        });
        this.options = list; // res.data.Result;
      });

      GetAllUser(
        this.$axios,
        {
          skipCount: 0,
          maxResultCount: 10
        },
        {}
      ).then(res => {
        let list = [];
        res.data.result.items.map((x, i) => {
          let item = {
            Id: x.id,
            UserName: x.userName,
            EmailAddress: x.emailAddress,
            FullName: x.fullName,
            IsActive: x.isActive
          };

          list.push(item);
        });

        this.dataList = list; // res.data.Result;
        this.totalNum = res.data.result.totalCount;
      });
    },

    handleCheckAllChange(val) {
      this.form.roles = val ? ["Admin"] : [];
      this.isIndeterminate = false;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.options.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.options.length;
    },

    checkinlist() {
      console.log("选择", this.form.roles);
    },

    addUser() {
      console.log("新增");

      this.form = {
        id: 0,
        userName: "",
        password: "",
        confirmPassword: "",
        name: "",
        surname: "",
        emailAddress: "",
        isActive: true,
        roles: []
      };
      this.addVisible = true;
    },

    deleteRow() {
      let id = this.form.id;
      console.log("删除", id);
      var params = new URLSearchParams();
      params.append("id", id); //传入后台的参数
      DeleteUser(this.$axios, { id: this.form.id }, {}).then(res => {
        this.getData();
      });
      this.delVisible = false;
    },
    //编辑用户
    handleEdit(index, row) {
      this.idx = index;
      let item = this.dataList[index];

      GetUser(this.$axios, { id: item.Id }, {}).then(res => {
        console.log("测试", res);
        if (res.data.success == true) {
          this.form = {
            id: res.data.result.id,
            userName: res.data.result.userName,
            name: res.data.result.name,
            surname: res.data.result.surname,
            emailAddress: res.data.result.emailAddress,
            isActive: res.data.result.isActive,
            roles: res.data.result.roles
          };
          this.editVisible = true;
        } else {
        }
        // this.getData();
      });
    },

    //删除
    handleDelete(index, row) {
      this.idx = index;
      let item = this.dataList[index];
      this.form = {
        id: item.Id,
        userName: item.UserName,
        passWord: item.PassWord
      };
      this.delVisible = true;
    },

    onEditSubmit() {
      let filter = {
        userName: this.form.userName,
        name: this.form.name,
        surname: this.form.surname,
        emailAddress: this.form.emailAddress,
        isActive: this.form.isActive,
        roleNames: this.form.roles,
        id: this.form.id
      };

      UpdateUser(this.$axios, filter, {}).then(res => {
        this.editVisible = false;
        this.getData();
        this.$message.success("修改成功");
      });
    },
    onAddSubmit() {
      if (this.form.password == this.form.confirmPassword) {
        let filter = {
          userName: this.form.userName,
          name: this.form.name,
          surname: this.form.surname,
          emailAddress: this.form.emailAddress,
          isActive: this.form.isActive,
          roleNames: this.form.roles,
          password: this.form.password
        };

        // console.log("测试", userInfo);
        CreateUser(this.$axios, filter, {}).then(res => {
          this.addVisible = false;
          this.getData();
          this.$message.success("新增成功");
        });
      } else {
        this.$message.console.error();
        ("确认密码是否一致");
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
  },
  //计算属性
  computed: {
    data() {
      return this.dataList;
    }
  }
};
</script>